<template>
  <div>
    <van-popup
      :value="show"
      position="bottom"
      @input="$emit('update:show', $event)"
    >
      <div class="van-popup-content">
        <div class="title">指标</div>
        <div v-for="(item, index) in iData" :key="index" class="part">
          <div class="name">{{ item.name }}</div>
          <div class="list">
            <div
              v-for="(item2, index2) in item.list"
              :key="index2"
              :class="['item', { active: item2 === item.active }]"
              @click="item.active = item2"
            >
              {{ item2 }}
            </div>
          </div>
        </div>
        <div class="setting" @click="$router.push('/indicatorSetting')">
          <span>指标设置</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";

export default {
  name: "Indicator",
  components: {
    "van-popup": Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      iData: [
        {
          name: "主图指标",
          active: "MA",
          list: ["VOL", "MA", "EMA", "BOLL", "SAR"],
        },
        {
          name: "副图基本指标",
          active: "VOL",
          list: [
            "VOL",
            "MACD",
            "KDJ",
            "BOLL",
            "RSI",
            "StochRSI",
            "OBV",
            "SAR",
            "DMA",
            "TRIX",
            "VR",
            "BRAR",
            "EMV",
            "WR",
            "ROC",
            "MTM",
            "PSY",
            "DMI",
            "CCI",
          ],
        },
        {
          name: "副图交易指标",
          active: "Top Acc.L/S",
          list: [
            "OI",
            "Top Acc.L/S",
            "Top Pos.L/S",
            "Acc.L/S",
            "Acc.L/S",
            "Taker B/S",
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 40px 30px;
    padding-bottom: 60px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;

    .title {
      font-size: 32px;
      margin-bottom: 20px;
      text-align: center;
    }

    .part {
      margin-bottom: 20px;
      .name {
        font-size: 28px;
        margin-bottom: 20px;
      }
      .list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;

        .item {
          height: 66px;
          border: 1px solid #323232;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          border-radius: 6px;
          transition: all 0.1s;
        }

        .active {
          border-color: #fff;
        }
      }
    }

    .setting {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #323232;
      padding-top: 20px;
    }
  }
}
</style>
